<template>
	<view class="main animated fadeIn faster">
		<view class="content position-fixed z-index-99" :style="{'paddingTop':$store.state.statusBarHeight+'px','top':'0'}">
			<view class="title">
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30"></text></view>
				<view class="tit">{{title}}</view>
			</view>
		</view>
		<view :style="{'paddingTop': PaddingTop + 'px'}">
			<view class="px-2" v-if="CurrentTab==0">
				<view class="font30 font-bold mb-2">什么是魅力等级?</view>
				<view class="font28 lineHeight40 mb-2">魅力等级是用户在小嗒组队中魅力的象征，等级越高，魅力图标越高级！只要在平台中收到礼物，就能提升魅力等级。</view>
				
				<view class="font30 font-bold mb-2">魅力等级如何升级?</view>
				<view class="font28 lineHeight40 mb-2">每在平台中收到价值1000嗒币的礼物，即可提升1个小级。</view>
				<view class="font24 colora2 mb-4">*10嗒币=1元人民币</view>
				
				<view class="w-100 mb-5">
					<view class="d-flex w-100" style="height: 90rpx;">
						<view class="bga370f9 font30 text-center colorfff w-50 h-100 lineHeight90 border-r-w">等级图标</view>
						<view class="bga370f9 font30 text-center colorfff w-50 h-100 lineHeight90">魅力总值</view>
					</view>
					<view class="d-flex w-100" v-for="(i, idx) in CharmLevel" :key="i.id">
						<view :class="['w-50', 'lineHeight90', 'd-flex-btn', 'border-r-w', idx%2===1? 'EvenRowSty' : 'OddRowsSty']">
							<image :src="i.icon" mode="widthFix" style="width: 160rpx;"></image>
						</view>
						<view :class="['w-50', 'lineHeight90', 'd-flex-btn', 'color84878c', idx%2===0? 'OddRowsSty' : 'EvenRowSty']">{{i.CharmVal}}</view>
					</view>
				</view>
				
				<view class="font30 font-bold mb-2">在哪里展示？</view>
				<view class="font28 lineHeight40 mb-2">除了在个人详情页和组队语言房间内有展示等级之外，还会在以下情况中展示给大家看哦~</view>
				<view class="font28 lineHeight40 mb-2">1.魅力值或财富值，只要其中一个达到第3个大级时，进房间会有流光特效提示；</view>
				<view class="font28 lineHeight40 mb-2">2.魅力值或财富值的标识还会在房间聊天公屏上直接显示出来，房间所有人都能看到你的尊贵啦~</view>
				<view class="font28 lineHeight40 mb-2">3.魅力值或财富值从第3个大级起，每次升大级，都会在房间顶部出现升级提示，房间所有人都能看到，快点升级来接受大家的祝贺吧！</view>
			</view>
			<view class="px-2" v-if="CurrentTab==1">
				<view class="font30 font-bold mb-2">什么是财富等级?</view>
				<view class="font28 lineHeight40 mb-2">财富等级是用户在小嗒组队中财力的象征，等级越高，财富图标越高级！只要在平台中送出礼物消费，就能提升财富等级。</view>
				
				<view class="font30 font-bold mb-2">财富等级如何升级？</view>
				<view class="font28 lineHeight40 mb-2">每在平台中消费嗒币的礼物和道具增值服务即可提升财富值。</view>
				<view class="font24 colora2 mb-4">*10嗒币=1元人民币</view>
				
				<view class="w-100 mb-5">
					<view class="d-flex w-100" style="height: 90rpx;">
						<view class="bgef932c font30 text-center colorfff w-50 h-100 lineHeight90 border-r-w">等级图标</view>
						<view class="bgef932c font30 text-center colorfff w-50 h-100 lineHeight90">财富总值</view>
					</view>
					<view class="d-flex w-100" v-for="(i, idx) in WealthLevel" :key="i.id">
						<view :class="['w-50', 'lineHeight90', 'd-flex-btn', 'border-r-w', idx%2===1? 'EvenRowSty' : 'OddRowsSty']">
							<image :src="i.icon" mode="widthFix" style="width: 160rpx;"></image>
						</view>
						<view :class="['w-50', 'lineHeight90', 'd-flex-btn', 'color84878c', idx%2===0? 'OddRowsSty' : 'EvenRowSty']">{{i.CharmVal}}</view>
					</view>
				</view>
				
				<view class="font30 font-bold mb-2">在哪里展示？</view>
				<view class="font28 lineHeight40 mb-2">除了在个人详情页和组队语言房间内有展示等级之外，还会在以下情况中展示给大家看哦~</view>
				<view class="font28 lineHeight40 mb-2">1.魅力值或财富值，只要其中一个达到第3个大级时，进房间会有流光特效提示；</view>
				<view class="font28 lineHeight40 mb-2">2.魅力值或财富值的标识还会在房间聊天公屏上直接显示出来，房间所有人都能看到你的尊贵啦~</view>
				<view class="font28 lineHeight40 mb-2">3.魅力值或财富值从第3个大级起，每次升大级，都会在房间顶部出现升级提示，房间所有人都能看到，快点升级来接受大家的祝贺吧！</view>
			</view>
			<view class="px-2" v-if="CurrentTab==2">
				<view class="font30 font-bold mb-2">什么是经验等级?</view>
				<view class="font28 lineHeight40 mb-2">经验等级是你在小嗒组队开启游戏搭子之旅后的成长属性，随着你的等级上升，你的等级标志会有相应的颜色变化。</view>
				
				<view class="w-100 mb-5">
					<view class="d-flex w-100" style="height: 90rpx;">
						<view class="bgb49891 font30 text-center colorfff w-50 h-100 lineHeight90 border-r-w">等级图标</view>
						<view class="bgb49891 font30 text-center colorfff w-50 h-100 lineHeight90">等级经验</view>
					</view>
					<view class="d-flex w-100" v-for="(i, idx) in ExperienceLevel" :key="i.id">
						<view :class="['w-50', 'lineHeight90', 'd-flex-btn', 'border-r-w', idx%2===1? 'EvenRowSty' : 'OddRowsSty']">
							<image :src="i.icon" mode="widthFix" style="width: 160rpx;"></image>
						</view>
						<view :class="['w-50', 'lineHeight90', 'd-flex-btn', 'color84878c', idx%2===0? 'OddRowsSty' : 'EvenRowSty']">{{i.CharmVal}}</view>
					</view>
				</view>
				
				<view class="font30 font-bold mb-2">如何提升等级？</view>
				<view class="font28 lineHeight40 mb-4">每天完成我的任务，累计在线60分钟，提升等级。</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				title: '',
				CurrentTab: null,
				PaddingTop: 88,
				CharmLevel: [
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220111405-f0d1ba00-8d16-4f8e-ac8e-a89cb04a9a13.png',CharmVal: 1000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220111534-70c412a8-e508-47a0-87cb-a05e7709b1d1.png',CharmVal: 2000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220111724-28ff5135-cf9f-4e41-9248-60a7ff742859.png',CharmVal: 3000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220111934-b10368d0-50e4-4634-af3a-339c1acf1e63.png',CharmVal: 4000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220112140-338ebbcc-fb00-4a06-a2fa-31b412103c82.png',CharmVal: 5000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220112401-fccc4143-bfca-4bc8-8eb6-d4e220232bbe.png',CharmVal: 10000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220112207-a91a0366-4b8a-4ab2-a0e7-6ac657e65f4c.png',CharmVal: 50000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220112350-2cc95129-1b43-450b-bacf-71d1d970ff7a.png',CharmVal: 100000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220112540-fca8eed0-2609-45c7-9fbc-9aa5796600cf.png',CharmVal: 500000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220112857-a5310604-888a-47ae-a7ce-c09c6256826e.png',CharmVal: 1000000},
				],
				WealthLevel: [
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220105321-342f58a5-48bf-461f-b323-522ca7fe81ad.png',CharmVal: 1000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220105615-725f3c67-8ac8-4344-84e5-dbacbde6add7.png',CharmVal: 2000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220105816-cd734375-2679-4b74-aa99-ecd81a949273.png',CharmVal: 3000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220110043-b01a4e46-9a4d-40e3-a2c3-30f70cfc50b4.png',CharmVal: 4000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220110229-1f07d315-be58-43bf-ac10-8b25e6aba1bd.png',CharmVal: 5000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220110445-5b8d6e75-8b5f-48eb-8fc9-939d15652fe3.png',CharmVal: 10000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220110750-1acbf224-aa86-4ce4-86d5-2a3dff5aced3.png',CharmVal: 50000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220110941-7d75805d-c008-49d3-8c24-e4f82c05d5a4.png',CharmVal: 100000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220111112-ec33695b-4ef9-4f14-8bdf-66c02e0f00d7.png',CharmVal: 500000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220111258-0552dfce-4999-4ff0-b7e3-95ff9983308d.png',CharmVal: 1000000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220111445-0a39dafa-40e2-44ed-bb95-b603b365ef64.png',CharmVal: 5000000},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220111616-79c4c6db-77bf-40b4-a0c4-c24e9da83036.png',CharmVal: 10000000}
				],
				ExperienceLevel: [
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220102610-9694110a-bb33-4038-ab72-00fe829806c4.png',CharmVal: 100},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220104458-9328d7bd-9439-42d9-b086-46f24b6d15bc.png',CharmVal: 100},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220105654-6b856532-c624-4af6-b3ab-94d234628d9e.png',CharmVal: 100},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220105855-ec7d27dd-42fc-4e85-897a-18c48fef39a8.png',CharmVal: 100},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220110136-ec780681-4bb4-4bf8-b075-cbd2627e24cc.png',CharmVal: 500},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220110339-4b8e0cf0-c6dc-43b9-8749-069ce5fc1e0c.png',CharmVal: 500},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220110547-2bbdb43f-07e6-4560-b08a-aaf33052a321.png',CharmVal: 500},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220110729-fd9dcd9e-aa53-4d6f-ac07-9512259083e7.png',CharmVal: 500},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220110941-ca2f6259-17db-4d0a-9710-e407ca0c74d7.png',CharmVal: 500},
					{icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/level/20241220111135-8d357a08-66b6-458d-8ad8-61f3c4a74353.png',CharmVal: 1000},
				]
			}
		},
		onLoad(opt) {
			this.CurrentTab = opt.type
			if(this.CurrentTab == 0) {
				this.title = '魅力等级'
			} else if(this.CurrentTab == 1) {
				this.title = '财富等级'
			} else {
				this.title = '经验等级'
			}
			this.setPaddingTop()
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 设置上边距
			setPaddingTop() {
				const query = uni.createSelectorQuery().in(this)
				query.select('.content').boundingClientRect(data => {
					this.PaddingTop = data.height + data.top
				}).exec()
			},
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #f8f8f8;
	overflow: hidden;
	.content {
		background: #f8f8f8;
		z-index: 99;
		.title {
			width: 750rpx;
			background: #f8f8f8;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			border-bottom: 1px solid rgba(204, 204, 204, .2);
			.tit {
				flex: 1;
				font-size: 32rpx;
				text-align: center;
				font-weight: normal;
				margin-right: 20px;
			}
		}
	}
	.pt-230 {
		padding-top: 230rpx;
	}
	.lineHeight40 {
		line-height: 40rpx;
	}
	.lineHeight90 {
		line-height: 90rpx;
	}
	.bga370f9 {
		background: #a370f9;
	}
	.bgef932c {
		background: #ef932c;
	}
	.bgb49891 {
		background: #b49891;
	}
	.color84878c {
		color: #84878c;
	}
	.w-50 {
		width: 50%;
	}
	.border-r-w {
		border-right: 2px solid #fafefe;
	}
	.OddRowsSty {
		background-color: #ebeef3;
	}
	.EvenRowsSty {
		background-color: #f9fafc;
	}
}
</style>
